import { QuestionMsg, Standard } from '@/components/Question';
import { ReplyInput } from '@/components/Reply';
import { SmileOutlined } from '@ant-design/icons';
import { Button, message, Result, Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { CurrentUserProps } from '@/types';
import styles from './index.less';
import { getQuestion, submitQuestion } from './service';
import { DataSourceProps } from './data';

let auditRecordId = 0;
let submitType = 0;

const test: Test.fuck = {
  name: 'laojiang',
  id: 1,
  tag: 'jj',
};
console.log('Test.demo', test);

// type Demo = <T,U>() {
//   (name:T,id:U):T
// }

// const fuckFc:Demo<string,number> = (name,id)=>{
//   return name
// }

// function demoFc(name,id){

//   return name
// }

// function fuckFc(name:{}):void{}

// function demoFc<Test>(name){

//   return name
// }

// const funcFc: Test<string> = (name)=>{

//   return name

// }
// console.log(funcFc)
// console.log(demoFc)

const Answer: React.FC<{ currentUser: CurrentUserProps }> = ({ currentUser }) => {
  const [loading, setLoading] = useState<boolean>(true);
  const [questionSource, setQuestionSource] = useState<Question.Detail>({
    tid: '',
    title: '',
    sex: '',
    age: '',
    forumName: '',
    onSetTime: '',
    mainBody: '',
    imgArr: [],
    description: '',
    score: 0,
  });
  const [standardSource, setStandardSource] = useState<Question.StandardSource>({
    replyStandardsDetail: '',
    titleDemo: '',
    contentDemo: '',
  });
  const [replySource, setReplySource] = useState<Question.ReplyParams>({
    schemeContent: [],
    lowWordCount: undefined,
    highWordCount: undefined,
  });

  const [dataSource, setDataSource] = useState<DataSourceProps>({});
  const [error, setError] = useState<boolean>(false);

  const questionView = async (next: boolean) => {
    setLoading(true);
    const { pid } = currentUser;
    const { code, data, info } = await getQuestion({ pid, getNext: next });

    setLoading(false);
    if (code != 0) {
      message.error(info);
      setError(true);
      return;
    }

    if (!data) {
      setError(true);
      return;
    }

    const {
      TopicDetailDto,
      AnswerStandards: {
        schemeContent,
        lowWordCount,
        highWordCount,
        replyStandardsDetail,
        titleDemo,
        contentDemo,
        score,
      },
    } = data;
    auditRecordId = 0;
    submitType = 0;
    setError(false);
    setDataSource(data);
    setQuestionSource({
      ...TopicDetailDto,
      ...{
        score,
        imgArr: TopicDetailDto.img,
      },
    });

    setReplySource({
      schemeContent,
      lowWordCount,
      highWordCount,
    });

    setStandardSource({
      replyStandardsDetail,
      titleDemo,
      contentDemo,
    });
  };

  useEffect(() => {
    questionView(false);
  }, []);

  const submitContent = async (replyList: []) => {
    // const { suggest, analyse, extra } = content
    const { pid } = currentUser;

    setLoading(true);
    const {
      poolId = 0,
      TopicDetailDto: { tid, sourceId, scoreTime, typeId },
    } = dataSource;
    const response = await submitQuestion({
      tid,
      pid,
      poolId,
      sourceId,
      scoreTime,
      typeId,
      mainbodyList: replyList,
      auditRecordId,
      submitType,
    });

    setLoading(false);
    if (response.code === 1001) {
      auditRecordId = response.data.auditRecordId; // eslint-disable-line
      submitType = 1;
    }

    if (response.code === 0) {
      questionView(true);
    }
    return response;
  };

  const noData = () => {
    return (
      <Result
        icon={<SmileOutlined />}
        title="暂时没有题了哦，请耐心等待"
        extra={
          <Button
            type="primary"
            onClick={() => {
              // setError(false)
              questionView(false);
            }}
          >
            刷新
          </Button>
        }
      />
    );
  };

  return (
    <>
      <Spin size="large" spinning={loading} tip="加载中">
        {error ? (
          noData()
        ) : (
          <>
            <div className={styles.detail}>
              <QuestionMsg
                questionSource={questionSource}
                onChangeNext={() => {
                  questionView(true);
                }}
                doubt
              />
            </div>
            <div className={styles.answer}>
              <Standard source={standardSource} />
              <div className={styles.reply}>
                {replySource.schemeContent && (
                  <ReplyInput
                    minWordCount={replySource.lowWordCount}
                    maxWordCount={replySource.highWordCount}
                    inputList={replySource.schemeContent}
                    onSubmit={submitContent}
                  />
                )}
              </div>
            </div>
          </>
        )}
      </Spin>
    </>
  );
};

export default connect(
  ({ user: { currentUser } }: { user: { currentUser: CurrentUserProps } }) => ({ currentUser }),
)(Answer);
